<template>
  <a-spin :spinning="tableLoad" size="large">
  <a-layout>
    <a-layout-content style="background: #fff;">
      <a-Row :gutter="16">
        <a-Col :md="18" :xs="24">
          <a-form>
            <a-form-item required label="简报名称:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input style="width: 80%" v-model="formItem.name" placeholder="请输入名称" />
            </a-form-item>
            <a-form-item label="发送方式:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-radio-group :options="plainOptions" v-model="formItem.type" />
            </a-form-item>
            <a-form-item label="触发状态:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-radio-group :options="options" v-model="formItem.status" />
            </a-form-item>
            <a-form-item required label="所属公司:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select style="width: 80%" @change="onCascaderChange" v-model="formItem.company" allowClear placeholder="请选择所属公司">
                <a-select-option v-for="item in companyAllData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              v-if="formItem.company"
              label="关联设备:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select
                v-if="formItem.company"
                style="width: 80%"
                allowClear
                v-model="formItem.equipment_id"
                placeholder="请选择设备名称"
              >
                <a-select-option
                  v-for="item in groupEquipmentData"
                  :value="item.id"
                  :key="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="简报联系人:" v-if="formItem.company" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-transfer 
                :dataSource="transferAlarmAllData"
                :titles="['未选', '已选']"
                :listStyle="{ width: '230px',height: '300px'}"
                :targetKeys="formItem.contact_ids"
                :selectedKeys="selectedKeys"
                @change="handleChange" @selectChange="handleSelectChange"
                :render="item=>item.title" />
            </a-form-item>
            <a-form-item required label="推送时间:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select v-model="formItem.send_time_type" placeholder="周" style="width: 100px" @change="weekChange">
                <a-select-option :value="8">每天</a-select-option>
                <a-select-option :value="1">周一</a-select-option>
                <a-select-option :value="2">周二</a-select-option>
                <a-select-option :value="3">周三</a-select-option>
                <a-select-option :value="4">周四</a-select-option>
                <a-select-option :value="5">周五</a-select-option>
                <a-select-option :value="6">周六</a-select-option>
                <a-select-option :value="7">周日</a-select-option>
              </a-select>
              <a-time-picker @change="onTimeChange" :value="moment(formItem.send_time, 'HH:mm:ss')" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 16, offset: 4  }">
              <a-button
                  class="mr20"
                  style="width: 150px;"
              		type="primary"
              		html-type="submit"
              		:loading="confirmLoading"
              		@click="addBtn"
              	 >提交</a-button>
                 <a-button type="danger" style="width: 150px;" @click="returnBtn">返回触发器列表</a-button>
              </a-form-item>
            </a-form-item>
          </a-form>
        </a-Col>
        <a-Col :md="6" :xs="24">
          <a-Card class="mb20">
            <div slot="title">
              简报名称
            </div>
            <div>
              给这个简报起一个名称
            </div>
          </a-Card>
        </a-Col>
      </a-Row>
    </a-layout-content>
  </a-layout>
  </a-spin>
</template>
<script>
  import { mapState, mapActions } from 'vuex';
  import moment from 'moment';
  // {label:'邮件',value: 3}
  const plainOptions = [{label:'短信',value: 1},{label:'微信',value: 2},];
  const options = [{label: '禁用',value: 0,},{label: '启用',value: 1,}]
  export default {
    name: "AddTrigger",
    data() {
      return {
        groupId: [],
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 18
          },
        },
        // mockData, //穿梭框
        selectedKeys: [],

        /* 测试end */
        plainOptions, //多选组
        options, //单选组

        /* 添加编辑 */
        confirmLoading: false,//按钮loading状态
        tableLoad: false,
        formItem:{
          name: '',           //触发器名称
          type: [],           //报警方式
          status: 0,         //触发状态
          company: undefined,
          equipment_id: undefined,   //设备ID
          contact_ids: [],    //报警联系人/组
          send_time_type: undefined,
          send_time: "00:00:00"
        },
        /* 添加编辑end */
      }
    },
    computed: {
      ...mapState({
        groupData: state => state.group.groupData,    //公司分组
        itemDetail: state => state.briefingTrigger.itemDetail,// 详情
        equipmentData: state => state.equipment.equipmentData, //设备名称信息
        equiItemDetail: state => state.equiRegister.itemDetail, //设备寄存器信息
        bulletinAll: state => state.briefingContacts.bulletinAll, //简报联系人
        groupEquipmentData: state => state.equipment.groupEquipmentData, //公司查设备
        companyAllData: state => state.group.companyAllData,
        alarmAllData: state => state.alertContacts.alarmAllData,
      }),
      transferAlarmAllData() {
        // console.log(this.alarmAllData);
        let arr = JSON.parse(JSON.stringify(this.alarmAllData))
        if (arr.length) {
          arr.forEach((item,i)=>{
            item.key = String(item.id)
            item.title = item.username
          })
        } else {
          arr = []
        }
        return arr
      }
    },
    watch: {
      itemDetail() {
        this.tableLoad = true
        console.log(this.itemDetail);
        this.equiChange(this.itemDetail.equipment_id)
        // this.contactsAll()
        this.groupEquipmentAll({
          group_id: this.itemDetail.company
        })
        this.alarmAll({
            company: this.itemDetail.company
          })
        this.formItem = {
          id: this.itemDetail.id,
          name: this.itemDetail.name,           //触发器名称
          type: this.itemDetail.type,           //报警方式
          status: Number(this.itemDetail.status),         //触发状态
          company: this.itemDetail.company,
          equipment_id: Number(this.itemDetail.equipment_id),   //设备ID
          contact_ids: this.itemDetail.contact_ids.split(",").map(String),    //报警联系人
          send_time_type: this.itemDetail.send_time_type,
          send_time: this.itemDetail.send_time
        }
        var arr = [];
        for (let i in this.itemDetail.company_ids) {
          arr.push(Number(this.itemDetail.company_ids[i])); //属性
        }
        this.groupId = arr;
         setTimeout(() => {
           this.tableLoad = false
         }, 1000);
      },
    },
    mounted() {
      // this.groupAll();
      this.companyAll();
      // this.contactsAll(false)
      if (this.$route.params.id) {
        this.dataDetail(this.$route.params.id)
      } else {
      // this.contactsAll()
      }
    },
    methods: {
      /* 推送时间 */
      moment,
      onTimeChange(time, timeString) {
        console.log(time, timeString);
        this.formItem.send_time = timeString
      },
      weekChange(value) {
        console.log(`selected ${value}`);
        console.log(this.formItem);
      },
      /* 推送时间end */
      ...mapActions({
        groupAll: "group/groupAll", //设备分组信息
        dataAdd: 'briefingTrigger/dataAdd', //添加
        dataEdit: 'briefingTrigger/dataEdit', //编辑
        dataDetail: 'briefingTrigger/dataDetail', //详情
        contactsAll: 'briefingContacts/contactsAll', //报警联系人所有信息
        alarmAll: 'alertContacts/alarmAll', // 报警联系人所有信息
        groupEquipmentAll: "equipment/groupEquipmentAll", //根据公司查询设备
        companyAll: "group/companyAll", //公司信息
      }),
      // 分组选择
      onCascaderChange(value) {
        console.log(value);
        this.formItem.equipment_id = undefined
        this.formItem.contact_ids = []
        if(value != undefined){
          this.groupEquipmentAll({
            group_id: value
          })
          this.alarmAll({
            company: value
          })
        }
      },
      handleChange(nextTargetKeys, direction, moveKeys) {
        this.formItem.contact_ids = nextTargetKeys
        console.log('targetKeys: ', nextTargetKeys);
      },
      handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
        this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
      },
      /* 测试end */
      equiChange(val) {
        this.formItem.contact_ids = []
      },
      	// 提交
      addBtn() {
      	this.confirmLoading = true;
        console.log(this.formItem);
        if (this.$route.params.id != undefined) {
          this.dataEdit(this.formItem);//编辑
        } else {
          this.dataAdd(this.formItem) //添加
        }
        setTimeout(() => {
          this.confirmLoading = false;
        }, 1000);
      },
      //返回
      returnBtn(){
        const that = this
        this.$confirm({
        	title: `您确定要返回触发器列表吗?`,
        	content: `返回触发器列表将不保留当前页输入数据!`,
        	okText: '确定',
        	okType: 'danger',
        	cancelText: '取消',
        	onOk() {
            that.$router.push('/briefing/Trigger')
        	},
        });
      },
    }
  }
</script>

<style scoped>
  >>>.ant-card .ant-card-head {
    background: #666;
    color: #fff;
  }
</style>
